<template>
  <div class="harderC">
    <div class="top" v-if="qian">
      <div v-for="(item, index) in nav"
      :key="index"
      :class="{ 'upnav': $router.history.current.name === item.router, 'left': true }"
      @click="updateNavClass(item.id, item.router)"
      >
        {{ item.name }} 
      </div>


      <div class="img-div" v-if="islogin">
        <img src="../../assets/logo.png" alt="">
        <el-dropdown class="name">
          <span class="el-dropdown-link">
            名字<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" placement="bottom-end">
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item @click.native="updateMyType">草稿箱</el-dropdown-item>
            <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
      </div>
      <div v-if="!islogin">
          <el-button size="mini" @click="() => { $router.push('/login') } ">请登录</el-button>
      </div>

      <div>
        <i class="el-icon-zoom-in search-ioc" @click="updateSearch"></i>
      </div>
    </div>

    <div class="bottom" v-if="upsearch">
      <div class="search">
        <el-input class="search-ipt" size="mini" v-model="searchValue"></el-input>
      </div>
      <div>
        <el-button size="mini">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    islogin: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      nav: [
        {
          id: 0,
          name: '首页',
          router: 'home'
        },
        {
          id: 1,
          name: '推荐',
          router: 'recommend'
        },
        {
          id: 2,
          name: '写文章',
          router: 'markdown'
        },
        {
          id: 3,
          name: '我的',
          router: 'my'
        },
        {
          id: 4,
          name: '反馈',
          router: 'feedback'
        }
      ],
      // nav的选中时的字体样式
      upnav: 0,
      // 搜索显示
      upsearch: false,
      // 搜索的值
      searchValue: '',
      qian: true
    }
  },
  methods: {
    updateMyType() {
      this.$emit('updateType', 'drafts')
      this.$router.push({name: 'my', params: {
        type: 'drafts'
      }})
      // setTimeout(() => {
      //   this.$emit('updateType', 'drafts')
      // }, 3000)
    },
    updateNavClass(id, name) {
      console.log(id);
      this.$router.push(`/apply/${name}/`)

      this.routerpush(name)
    },
    // 关于路由样式的优化
    routerpush(name) {
      // 片当前页面是否与导航对应
      if (this.$router.history.current.name === name) return;
      // 不对应则运行这里
      this.qian = false
      setTimeout(() => {
        this.qian = true
      },200)
    },
    logOut() {
      this.$confirm('是否退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
        this.$router.push({name:`login`})
        window.localStorage.removeItem('user')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
        
      });
    },
    updateSearch(){
      this.upsearch
        ? this.upsearch = false
        : this.upsearch = true
    }
  }

}
</script>

<style scoped lang="scss">
.harderC{
  box-shadow: 0px 6px 5px 0px rgb(202, 202, 202);
  z-index: 9999;
  
}
.top{
  height: 50px;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
  color: #898989;
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
}
.upnav{
  color: #e5e5e5 !important;
}
.search-ioc{
  font-size: 18px;
}


.left{
  user-select: none;
  cursor: pointer;
}
.img-div{
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  color: #e5e5e5;
  img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .name{
    margin-left: 30px;
  }
}

.bottom{
  height: 50px;
  background-color: #898989;
  display: flex;
  justify-content: center;
  line-height: 50px;
  .search{
    
    .search-ipt{
      width: 300px;
      height: 20px !important;
    }
  }
}
</style>